<template>
	<div style="display: flex;flex-direction: column;" class="otherPage partyBuildingLeads organizationBuilding">
		<Header :selected="2"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">

			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="2">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-row>
					<el-col class="organizationBuildingImg">
						<div v-html="orgBuildContent">

						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		partyBuildingLeads
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				baseUrl: this.$request.getImgUrl(),
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 4,
				total: 1000,
				currentPage: 1,
				menus: partyBuildingLeads,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//党建引领
						label: this.$t('partyBuildingLeads'),
						to: '/partyBuildingLeads'
					},
					{
						//组织建设
						label: this.$t('organizationBuilding'),
						to: '/organizationBuilding'
					}
				],

				orgBuildContent: '',


				hoverIndex: -1
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.getOrgBuildTopImage();
			this.getOrgBuild().then(i => {
				this.$request.setImageMaxwidth("img");
				
				// const images = document.querySelectorAll('img');
				// images.forEach(image => {
				// 	image.style.width = '100%';
				// 	image.style.height = 'auto';
				// });
			});
		},
		methods: {
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			getOrgBuildTopImage() {
				let params = {};
				let that = this;
				that.$request.getOrgBuildTopImage(params).then(res => {
					if (res && res.data) {
						that.bg_img = that.baseUrl + res.data.fileUrl;
					}
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			getOrgBuild() {

				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getOrgBuild(params).then(res => {
						if (res && res.data) {
							that.orgBuildContent = res.data.content;
						}
							resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			}
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/partyBuildingLeads/partyBuildingLeads.css");
</style>